<template>
  <div class="hand_sign">
    <el-steps align-center>
      <el-step :title="stepOneTitle">
        <div slot="description">
          <el-button type="primary" @click="doPrint">打印</el-button>
        </div>
      </el-step>
      <el-step :title="stepTwoTitle" :description="stepTwoDesc"></el-step>
      <el-step title="上传存档">
        <div slot="description">
          <el-upload
            class=""
            action="admin/file/upload"
            :on-change="handleChange"
            :file-list="fileList"
          >
            <el-button type="primary">上传</el-button>
          </el-upload>
        </div>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
import FileUpload from "@/components/FileUpload/index.vue"
export default {
  name: 'HandSign',
  components: { FileUpload },
  props: {
    stepOneTitle: {
      type: String,
      default: '打印'
    },
    stepTwoTitle: {
      type: String,
      default: '患者签字'
    },
    stepTwoDesc: {
      type: String,
      default: '根据要求进行手签或按手印'
    },
    imageList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  watch: {
    imageList(newVal) {
      this.fileList = newVal
    }
  },
  mounted() {
    this.fileList = this.imageList
  },
  methods: {
    doPrint() {
      this.$emit('doPrint')
    },
    handleChange(file, fileList) {
      console.log(file)
      if(file.status == "success"){
        let newFileList = [];
        fileList.forEach(item => {
          if(item.response){
            if(item.response.code == 0){
              newFileList.push({
                name: item.response.content.originName,
                url: item.response.content.url
              })
            }else{
              this.$notify({
                title: '提示',
                message: item.response.msg,
                type: 'danger'
              })
            }
          }else{
            newFileList.push({
              name: item.name,
              url: item.url
            })
          }
        })
        this.$emit('updateFileList', newFileList)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.hand_sign{
  ::v-deep .el-step__head.is-wait{
    color: #303133;
    border-color: #303133;
  }
  ::v-deep .el-step__title.is-wait{
    color: #303133;
  }
}
</style>